<template>
  <div class="supervisioncommand-data">
    <el-card class="h-card">
      <el-row>
        <el-col :span="3">
          <el-form>
            <el-form-item>
              <el-select @change="changeSelect" v-model="townVal" placeholder="请选择乡镇">
                <el-option
                  v-for="item in townSelect"
                  :key="item.id+'town'"
                  :label="item.township_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="userName" @blur="blurInput" placeholder="请输入人员名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="radioGroup" @change="changeRadio">
                <el-radio :label="0">离线</el-radio>
                <el-radio :label="1">在线</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-menu class="h-menu">
            <el-menu-item
              v-for="item in userListData"
              :key="item.id+'user'"
              @click="menuClick(item.id)"
            >
              <span v-text="item.turename"></span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="21" class="h-100">
          <baidu-map class="h-100" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
            <bm-polyline :path="polylinePath" stroke-color="blue"></bm-polyline>
            <bm-marker :position="markerPath" v-if="markerPath !== null"></bm-marker>
          </baidu-map>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SupervisionCommand",
  data() {
    return {
      townSelect: [],
      userListData: [],
      townVal: null,
      userName: null,
      radioGroup: 0,
      center:{lng:0,lat:0},
      zoom:3,
      polylinePath:[],
      markerPath:null
    };
  },
  created() {
    this.townList(); // 乡镇
    this.userList(); // 人员
  },
  methods: {
    // 乡镇数据
    townList() {
      this.$api.LAWMONITORING.TOWNSHIP()
        .then(res => {
          this.townSelect = res.data;
        })
        .catch(() => {
          this.$message({
            showClose: true,
            message: "暂无数据",
            type: "error"
          });
        });
    },
    // 人员数据
    userList() {
      this.$api.LAWMONITORING.SUPUSERLIST({
        online: this.radioGroup
      })
        .then(res => {          
          this.userListData = res.data;
        })
        .catch(() => {
          this.userListData = []
          this.$message({
            showClose: true,
            message: "暂无数据",
            type: "error"
          });
        });
    },
    // 菜单点击事件
    menuClick(uid) {
      this.$api.LAWMONITORING.TRACEQUERY({
        uid
      })
      .then(res=>{
        this.polylinePath = []
        for (const item of res.data) {
          this.polylinePath.push({lng:item.lng,lat:item.lat})
        }        
        if (res.data.length === 1) {
          this.markerPath = {lng:res.data[0].lng,lat:res.data[0].lat}
          this.center.lng = res.data[0].lng
          this.center.lat = res.data[0].lat
        }
      })
      .catch(()=>{
        this.$message({
          showClose: true,
          message: '暂无数据',
          type: 'error'
        })
      })
    },
    // 离线radio事件
    changeRadio(){
      this.userList()
      this.townVal = this.userName = null
    },
    // 乡镇select
    changeSelect(data){
      this.userName = null
      this.$api.LAWMONITORING.DEALINGPEOPLE({
        townshipid:data
      })
      .then(res=>{
        this.userListData = res.data;
      })
      .catch(()=>{
        this.userListData = []
        this.$message({
          showClose:true,
          message:'暂无数据',
          type:'error'
        })
      })
    },
    // 人员框失去焦点
    blurInput(){
      this.townVal = null
      this.$api.LAWMONITORING.TURENAME({
        turename: this.userName
      })
      .then(res=>{
        this.userListData = res.data;
      })
      .catch(()=>{
        this.userListData = []
        this.$message({
          showClose:true,
          message:'暂无数据',
          type:'error'
        })
      })
    },
    // 地图初始化
    handler({BMap,map}){
      this.center.lng = 117.142553
      this.center.lat = 39.230903
      this.zoom = 15
    },

  }
};
</script>

<style lang="scss" scoped>
.h-card {
  height: 830px;
  overflow-y: auto;
  .el-select {
    width: 100%;
  }
  .h-menu {
    height: 600px;
    overflow-y: auto;
  }
  .h-100 {
    height: 790px;
  }
  /deep/ .anchorBL{
    display: none;
}
}
</style>
